import React, { PureComponent } from 'react'
import { connect } from "react-redux";
import './City.scss'
import { CloseOutlined } from "@ant-design/icons"
import data from '../../js/chengShi'
import cityAction from '../../redux/action/cityAction'
import { withRouter } from 'react-router-dom';
import request from '../../api/api'


class City extends PureComponent {
    state = {
        list: ['上海', '北京', '广州', '深圳', '武汉', '天津', '西安', '南京', '杭州', '成都', '重庆'],
        hislist: [],
        place: ''
    }
    getCity = (data) => {
        // console.log('city.jsx==>',data);
        this.props.cityAction(data)
        this.props.history.goBack()
    }
    goBack = () => {
        this.props.history.goBack()
    }
    componentDidMount() {
        this.displayLocation()
    }
    getMyLocation = () => {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(this.displayLocation);
        } else {
            alert("Oops, no geolocation support.");
        }
    }
    displayLocation = (position) => {
        // let latitude = position.coords.latitude; 
        // let longitude = position.coords.longitude;
        request({
            url: '/bpi/ws/location/v1/ip',
            params: {
                params: {
                    "key": "PTMBZ-GCQLW-SC2RG-R2FNI-HWPNQ-4PBQM",
                }
            },
            method: 'get'
        }).then(res => {
            let data = res.result.ad_info.city.slice(0, 2)
            let newArr = [...new Set(this.props.city)]
            this.setState({
                hislist: newArr,
                place: data
            })
        })
    }

    render() {
        let arr = data
        return (
            <>
                <div className="chengShi">
                    <div>
                        <div className='close' onClick={() => this.goBack()}><CloseOutlined /></div>
                        <p>定位城市</p>
                        <div>
                            <button>{this.state.place}</button>
                        </div>
                    </div>
                    <div>
                        <p>最近访问城市</p>
                        <div className="zuiJin">
                            {
                                this.state.hislist.map(el => {
                                    return (
                                        <div key={el} onClick={() => this.getCity(el)}>
                                            <button>{el}</button>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div>
                        <p>热门城市</p>
                        <div>
                            {
                                this.state.list.map(el => {
                                    return (
                                        <div key={el} onClick={() => this.getCity(el)}>
                                            <button>{el}</button>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className="chengPai">
                        <p>A</p>
                        {
                            arr.letterMap.A.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <br />
                    <div className="chengPai">
                        <p>B</p>
                        {
                            arr.letterMap.B.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>C</p>
                        {
                            arr.letterMap.C.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>D</p>
                        {
                            arr.letterMap.D.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>E</p>
                        {
                            arr.letterMap.E.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>F</p>
                        {
                            arr.letterMap.F.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>G</p>
                        {
                            arr.letterMap.G.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>H</p>
                        {
                            arr.letterMap.H.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>J</p>
                        {
                            arr.letterMap.J.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>K</p>
                        {
                            arr.letterMap.K.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>L</p>
                        {
                            arr.letterMap.L.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>M</p>
                        {
                            arr.letterMap.M.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>N</p>
                        {
                            arr.letterMap.N.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>P</p>
                        {
                            arr.letterMap.P.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>Q</p>
                        {
                            arr.letterMap.Q.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>R</p>
                        {
                            arr.letterMap.R.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>S</p>
                        {
                            arr.letterMap.S.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>T</p>
                        {
                            arr.letterMap.T.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>

                    <div className="chengPai">
                        <p>W</p>
                        {
                            arr.letterMap.W.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>X</p>
                        {
                            arr.letterMap.X.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>Y</p>
                        {
                            arr.letterMap.Y.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="chengPai">
                        <p>Z</p>
                        {
                            arr.letterMap.Z.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.getCity(item.nm)}>
                                        <span>{item.nm}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </>
        )
    }
}
export default connect(
    state => ({
        city: state.city,
        cityName: state.city[state.city.length - 1]
    }), {
    cityAction
})(withRouter(City))